<template>
	<div class="index">

		<div class="team">

				<div class="powertable fixfun" v-loading="loading">
		      <el-button  type="primary" plain round style="margin: 20px;" @click="newpersonlog = true">新建功能</el-button>
					<el-collapse v-model="activeNames">
						  <el-collapse-item v-for="item in list" :name="item.id"  :key="item.id" style="margin-left: 40px;">
							<template slot="title">{{item.name}}({{item.code}})</template>
							id:{{item.id}}
							<span style="color: #007AFF; margin: 0 10px;">/</span>
							code:{{item.code}}
							<span style="color: #007AFF; margin: 0 10px;">/</span>
							<el-button size="mini" @click="fix(item.id,item.name,item.url,item.description,item.code,item.parent_id)">修改</el-button>
							<el-button size="mini" type="primary" @click="delet(item.id,item.name)">删除</el-button>
							<div>
								<el-collapse-item v-for="item2 in item.data" :name="item2.id"  :key="item2.id"  style="margin-left: 40px;">
									<template slot="title">{{item2.name}}({{item2.code}})<el-button size="mini" style="margin-left: 20px;" @click="fixapiopen(item2.id,item.name)">修改API</el-button></template>
									id:{{item2.id}}
									<span style="color: #007AFF; margin: 0 10px;">/</span>
									code:{{item2.code}}
									<span style="color: #007AFF; margin: 0 10px;">/</span>
									<el-button size="mini" @click="fix(item2.id,item2.name,item2.url,item2.description,item2.code,item2.parent_id)">修改</el-button>
									<el-button size="mini" type="primary" @click="delet(item2.id,item.name)">删除</el-button>
									<div class="list3">
										<div class="powerlist" v-if="item2.data != ''">
											<div class="powerth">ID和CODE</div>
											<div class="powerth">功能名称</div>
											<div class="powerth">路由地址</div>
											<div class="powerth">更新时间</div>
											<div class="powerth">备注说明</div>
											<div class="powerth">操作</div>
										</div>
										<div class="powerlist" v-for="item3 in item2.data"  :key="item3.id">
											<div class="powertd">{{item3.id}}<span style="color: #007AFF; margin: 0 10px;">/</span>{{item3.code}}</div>
											<div class="powertd">{{item3.name}}</div>
											<div class="powertd">{{item3.url}}</div>
											<div class="powertd">{{item3.created_at}}</div>
											<div class="powertd">{{item3.description}}</div>
											<div class="powertd">
												<el-button type="text" @click="fix(item3.id,item3.name,item3.url,item3.description,item3.code,item3.parent_id)">修改</el-button>
												<el-button type="text" style="color: #2974FF;" @click="delet(item3.id,item.name)">删除</el-button>
												<el-button type="text" @click="fixapiopen(item3.id,item.name)">修改API</el-button>
											</div>
										</div>
									</div>
								</el-collapse-item>
							</div>
						  </el-collapse-item>
					</el-collapse>
				</div>



				<el-dialog title="新建功能" center class="log" center :visible.sync="newpersonlog" width="510px">
					<el-form ref="form" @submit.native.prevent :model="newperson" label-width="120px">
							<el-form-item label="超大类">
								<el-select v-model="newperson.parpar" clearable  @change="getsuperlist()" placeholder="请选择所属超大类">
								  <el-option label="建立超大类时选我" value="0"></el-option>
								  <el-option v-for="item in supersuperlist"  :label="item.name" :value="item.id"  :key="item.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="大类">
								<el-select v-model="newperson.par" clearable placeholder="请选择所属大类">
								  <el-option v-for="item in superlist"  :label="item.name" :value="item.id"  :key="item.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="功能code">
									<el-input v-model="newperson.code"></el-input>
							</el-form-item>
						  <el-form-item label="功能名称">
						  		<el-input v-model="newperson.name"></el-input>
						  </el-form-item>
						  <el-form-item label="api/add">
						  		<el-input v-model="newperson.user"></el-input>
						  </el-form-item>
						  <el-form-item label="备注说明">
							<el-input type="textarea" v-model="newperson.desc"></el-input>
						  </el-form-item>
					</el-form>
				  <span slot="footer" class="dialog-footer">
					<el-button round type="info" @click="newpersonlog = false">取 消</el-button>
					<el-button round type="danger" @click="newpersongo">确 定</el-button>
				  </span>
				</el-dialog>

				<el-dialog center title="修改功能" class="log" :visible.sync="fixpersonlog" width="510px">
					<el-form ref="form" @submit.native.prevent :model="fixperson" label-width="120px">
						<el-form-item label="功能code">
								<el-input v-model="fixperson.code"></el-input>
						</el-form-item>
						 <el-form-item label="功能名称">
						 		<el-input v-model="fixperson.name"></el-input>
						 </el-form-item>
						 <el-form-item label="api/add">
						 		<el-input v-model="fixperson.user"></el-input>
						 </el-form-item>
						 <el-form-item label="备注说明">
						 					<el-input type="textarea" v-model="fixperson.desc"></el-input>
						 </el-form-item>
					</el-form>
				  <span slot="footer" class="dialog-footer">
					<el-button round type="info" @click="fixpersonlog = false">取 消</el-button>
					<el-button round type="danger" @click="fixpersongo">确 定</el-button>
				  </span>
				</el-dialog>

				<el-dialog title="修改API" center :visible.sync="fixapilog" width="810px">
					<div v-loading="fixloading">
						<div class="apititle">功能名:<span>{{fixapi.name}}</span>，已选中api:<span>{{danxuansname}}</span></div>
						<div class="powertable auto">
							<div class="powerlist">
								<div class="powerth th1">选择</div>
								<div class="powerth">API名称</div>
								<div class="powerth">备注说明</div>
							</div>

							<div class="powerlist" v-for="item in apilist"  :key="item.id">
								<div class="powertd th1">
									<input type="checkbox" :value="item.id" @change="danxuan(item.name)" v-model="danxuans">
								</div>
								<div class="powertd">{{item.name}}</div>
								<div class="powertd">{{item.description}}</div>
							</div>
						</div>
					</div>
				  <span slot="footer" class="dialog-footer">
					<el-button  round type="info" @click="fixapilog = false">取 消</el-button>
					<el-button  round type="danger" @click="fixapigo">确 定</el-button>
				  </span>
				</el-dialog>

			</div>
	</div>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name : "gongnengdingyi",
		data(){
			return {
				department:"",
				teamname:"",

				danxuans:[],
				danxuansname:[],

				loading:true,
				fixloading:true,

				total:0,
				page:1,
				page_size:20,

				newpersonlog:false,
				newperson:{
					name:"",
					user:"",
					desc:"",
					code:"",
					parpar:"",
					par:""
				},
				fixpersonlog:false,
				fixperson:{
					id:"",
					name:"",
					user:"",
					desc:"",
					code:"",
					parparid:"",
					parid:"",
					parparname:"",
					parname:""
				},
				fixapilog:false,
				fixapi:{
					id:"",
					name:"",
				},

				list:[],
				apilist:[],
				superlist:[],
				supersuperlist:[],
				getlistid:0,

				activeNames:[]
			}
		},
		created() {
			this.getlist()
			this.getsupersuperlist()
			//获取api列表
			axios.get('/api/routes/list?page_size=1000')
				.then(response => {
					if(response.data.msg.code == 0){
						this.apilist = response.data.data.data
					}else{
						this.$message.error(response.data.msg.info);
					}
				})
			var shop = JSON.parse(localStorage.getItem('USER'));
			this.memid = shop.id
		},
		mounted(){

		},
		methods: {
			//获取par
			getsuperlist:function(){
				console.log(this.newperson.parpar)
				axios.get('/api/functions/list?new=1&parent_id='+this.newperson.parpar)
					.then(response => {
						if(response.data.msg.code == 0){
							this.superlist = response.data.data.data
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//获取parpar
			getsupersuperlist:function(){
				axios.get('/api/functions/list?new=1&parent_id='+this.getlistid)
					.then(response => {
						if(response.data.msg.code == 0){
							this.supersuperlist = response.data.data.data
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},

			//获取列表
			getlist:function(){
				axios.get('/api/functions/lists?new=1')
					.then(response => {
						if(response.data.msg.code == 0){
							this.list = response.data.data

              this.list.forEach((item,index)=>{
                if(item.name == '产品销售中心'){
                  this.list.splice(index,1)
                }
              })

							this.loading = false
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//修改功能
			fix:function(id,name,user,desc,code,parid,parparid,parname,parparname){
				this.fixperson.id = id
				this.fixperson.name = name
				this.fixperson.user = user
				this.fixperson.desc = desc
				this.fixperson.code = code
				this.fixperson.parent_id = parid
				this.fixpersonlog = true
			},
			//修改功能确认
			fixpersongo:function(){
				var that = this
				var params = new URLSearchParams();
				// if(this.fixperson.parpar == 0){
				// 	params.append('parent_id',this.fixperson.parpar);
				// }else{
				// 	params.append('parent_id',this.fixperson.par);
				// }
				params.append('parent_id',this.fixperson.parent_id);
				params.append('code',this.fixperson.code);
				params.append('id',this.fixperson.id);
				params.append('name',this.fixperson.name);
				params.append('url',this.fixperson.user);
				params.append('description',this.fixperson.desc);
				axios.post('/api/functions/update', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.$message({
								type: 'success',
								message: '修改成功!'
							});
							this.fixpersonlog = false
							this.loading = true
							this.getlist();
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},
			//修改api选中
			danxuan:function(name){
				if(this.danxuansname.indexOf(name) >= 0){
					this.danxuansname.splice(this.danxuansname.indexOf(name),1)
				}else{
					this.danxuansname.push(name)
				}
			},
			//修改api
			fixapiopen:function(id,name){
				this.danxuans = []
				this.danxuansname = []
				this.fixapilog = true
				this.fixloading = true
				this.fixapi.id = id
				this.fixapi.name = name
				//获取这个功能已有的api
				axios.get('/api/functions/api/list?func_id='+id)
					.then(response => {
						if(response.data.msg.code == 0){
							for(var i in response.data.data){
								this.danxuans.push(response.data.data[i].id)
								this.danxuansname.push(response.data.data[i].name)
							}
							this.fixloading = false
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//修改api确认
			fixapigo:function(){
				var that = this
				var params = {
					func_id:this.fixapi.id,
					api_ids:this.danxuans
				}
				axios.post('/api/functions/api', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.$message({
								type: 'success',
								message: '修改成功!'
							});
							this.fixapilog = false
							this.loading = true
							this.getlist();
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},

			//删除
			delet:function(id,name){
				this.$confirm('此操作将永久删除名称为"'+name+'"功能, 是否继续?', '提示', {
				  confirmButtonText: '保存',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					var that = this
					var params = new URLSearchParams();
					params.append('id',id);
					axios.post('/api/functions/delete', params)
					  .then(response => {
							if(response.data.msg.code == 0){
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.newpersonlog = false
								this.loading = true
								this.getlist();
							}else{
								this.$message.error(response.data.msg.info);
							}
					  })
				})
			},
			//新建功能
			newpersongo:function(){
				var that = this
				var params = new URLSearchParams();
				if(this.newperson.par == ""){
					params.append('parent_id',this.newperson.parpar);
				}else{
					params.append('parent_id',this.newperson.par);
				}
				params.append('code',this.newperson.code);
				params.append('name',this.newperson.name);
				params.append('url',this.newperson.user);
				params.append('description',this.newperson.desc);

				axios.post('/api/functions/add', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.$message({
								type: 'success',
								message: '创建成功!'
							});
							this.newpersonlog = false
							this.loading = true
							this.getlist();
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},
			//搜索内容
			searchname:function(){
				console.log(this.teamname)
			}
		}
	}
</script>

<style scoped="scoped">
  .log input{ width: 250px !important;}
  /deep/	.fixfun .el-collapse-item__header{ width: 300px; line-height: 40px; height: 40px; border: none;}
  /deep/	.fixfun .el-collapse{ border: none;}
  /deep/	.fixfun .el-collapse-item__wrap{ border: none;}
  /deep/	.fixfun .el-collapse-item__arrow{ line-height: 40px;}
  /deep/	.fixfun .el-collapse-item__content{ padding-bottom: 0;}
	.team{ background-color: #fff; }
	/deep/ .el-button--danger {
	     color: #FFF;
	     background-color: #2974FF;
	     border-color: #2974FF;
	 }

	.powertop {
	  display: flex;
	  background:#f9f9f9;
	}

	.powertopli {
	  flex-basis: 180px;
	  line-height: 50px;
	  border-bottom: 3px #F9F9F9 solid;
	  color: #727272;
	  border-right: 1px #F9F9F9 solid;
	  font-size: 16px;
	  text-align: center;
	}

	.powertopact {
	  background: #FFFFFF;
	  border-bottom: 3px #2974FF solid;
	}
	.powerbtn{ flex-basis: 320px; display: flex;}
	.powersearch{ flex-basis: 250px;}
	.powerlist{ display: flex; line-height: 45px; text-align: center;}
	.powerth{ flex: 1; background: #E5E5E5; font-size: 14px; color: #666666; border-right: 1px #EAEAEA solid;  border-left: 1px #EAEAEA solid;}
	.th1{ flex-basis: 80px; max-width: 80px; border-left: 1px #EAEAEA solid;}
	.powertd{ flex: 1; background: #FFFFFF; font-size: 14px; color: #888888; border-bottom: 1px #EAEAEA solid;border-right: 1px #EAEAEA solid;  border-left: 1px #EAEAEA solid; margin-left: -1px;}
	.fenye{ text-align: right; margin: 20px 0;}
	.apititle{ line-height: 40px; margin-bottom: 20px; font-size: 14px;  color: #888;}
	.apititle span{ color: #333; font-weight: 600;}
	.auto{ height: 500px; overflow: auto;}
	.powerlistli{ margin-left: 40px; font-size: 16px;}
	.powerlistli2{ margin-left: 80px; font-size: 14px;}
	.list3{ margin-left: 120px; border-bottom: 1px #EAEAEA solid;}
	.powertable{ background: #FFFFFF;}
</style>
